<template>
  <div class="player-panel">
    <van-swipe class="player-swipe" :show-indicators="false" :loop="false" ref="swipeRef" @change="handleChangeSwipe">
      <van-swipe-item>
        <song-detail />
      </van-swipe-item>
      <van-swipe-item>
        <lyrics-detail />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { SwipeInstance } from "vant";
import songDetail from "./songDetail.vue";
import lyricsDetail from "./lyricsDetail.vue";

const emit = defineEmits<{
  (e: "swipeChange", index: number): void;
}>();
const swipeRef = ref<SwipeInstance>();

const switchSWipe = (index: number) => {
  swipeRef.value?.swipeTo(index);
};

const handleChangeSwipe = (index: number) => {
  emit("swipeChange", index);
};

defineExpose({
  switchSWipe,
});
</script>

<style scoped lang="scss">
.player-panel {
  width: 100%;
  height: 100%;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  background-color: var(--box-color);
  box-shadow: 0 0 15px rgb(0, 0, 0, 0.2);
  overflow: hidden;
}
.player-swipe {
  width: 100%;
  height: 100%;
}
</style>
